import React from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import menus from '../Config/menu';
import RouteWithSubRoutes from '../utils/RouteWithSubRoutes';
import { Link } from "react-router-dom";

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;



class Admin extends React.Component {
  state = {
    collapsed: false,
  };
  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }
  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse}
        >
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            {menus.map((menu, i) => {
              return menu.children ?

                <SubMenu
                  key={i}
                  title={<span><Icon type="user" /><span>{menu.name}</span></span>}
                >
                  {
                    menu.children.map((child, j) => {
                      return <Menu.Item key={i + '-' + j}><Link to={child.path}>{child.name}</Link></Menu.Item>;
                    })
                  }
                </SubMenu>
                :
                <Menu.Item key={i}>
                  <Icon type="pie-chart" />
                  <span><Link to={menu.path}>{menu.name}</Link></span>
                </Menu.Item>
            }
            )}
          </Menu>


        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              {this.props.routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>©2016 Created by zxk</Footer>
        </Layout>
      </Layout>
    );
  }
}

export default Admin;